<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">{{ item.name }} - {{ item.value }}</div>
  </RecycleScroller>
</template>

<script lang="ts" setup>
import { RecycleScroller } from 'vue-virtual-scroller'
type ListItem = {
  id: number
  name: string
  value: number
}

defineProps<{
  items: ListItem[]
  // items: {
  //   type: Array<ListItem>
  //   required: true
  // }
}>()
</script>

<style scoped>
.scroller {
  height: 200px;
}

.item {
  height: 50px;
  padding: 12px;
  border-bottom: 1px solid #eee;
}
</style>
